<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card
        v-loading="loading"
        class="tree-card"
      >
        <!-- 头部 -->
        <tree-tools
          :node-data="company"
          :root="true"
          @add-depats="addDeptFn"
        />
        <!-- 树形结构 -->
        <el-tree
          :data="departs"
          default-expand-all
          :props="defaultProps"
        >
          <template #default="{data}">
            <tree-tools
              :node-data="data"
              @del-depats="getDepartments"
              @add-depats="addDeptFn"
              @edit-depats="editDeptFn"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门 弹层 -->
      <!--
        is-show.sync
        加了.sync修饰符, 意味父组件允许子组件按照一定要求修改isShow中的值
       -->
      <add-dept
        ref="addDept"
        :is-show.sync="isShow"
        :node-data="nodeData"
        :dept-list="deptList"
        @close-dialog="closeDialogFn"
        @app-dept="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 1. 树形展示数据
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 2. 头部展示数据
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      // 3. 添加部门弹层是否显示
      isShow: false,
      // 4. 添加操作对应的父级数据
      nodeData: {},
      // 5. 原始的列表数据
      deptList: [],
      // 6. 是否显示loading加载
      loading: false
    }
  },
  created() {
    // 1. 获取部门信息
    this.getDepartments()
  },
  methods: {
    /**
     * 获取部门信息
     */
    async getDepartments() {
      // 显示loading加载
      this.loading = true

      // 延迟两秒操作
      // await new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve()
      //   }, 2000)
      // })

      // 发起请求
      const { data: { depts, companyName }} = await reqGetDepartments()
      // console.log(depts, '66666')
      this.departs = tranListToTreeData(depts, '')
      this.company.name = companyName
      // 为了正常校验, 所有一级部门的pid都是''
      this.company.id = ''
      this.deptList = depts

      // 隐藏loading显示
      this.loading = false
    },

    /**
     * 关闭弹层
     */
    closeDialogFn(flag) {
      this.isShow = flag
    },

    /**
     * 点击了添加部门操作
     */
    addDeptFn(nodeData) {
      // 1. 让添加的弹层展示出来
      this.isShow = true
      // 2. 记录添加操作对应的父级数据
      this.nodeData = nodeData
      // 3. 调用子组件的获取用户信息方法
      // this.$refs.addDept.getSimpleUserList()
      // 4. 修改子组件标题
      // this.$refs.addDept.dialogTitle = '添加部门'
    },

    /**
     * 点击了编辑部门操作
     */
    editDeptFn(nodeData) {
      // 1. 让编辑的弹层展示出来
      this.isShow = true
      // 2. 记录编辑操作对应的数据
      this.nodeData = nodeData
      // 3. 修改子组件标题
      // this.$refs.addDept.dialogTitle = '编辑部门'
      // 4. 调用子组件中获取部门详细信息函数 (注意:传递id)
      this.$refs.addDept.getDeptDetailMsg(nodeData.id)
    }
  }
}

</script>

<style lang="scss" scoped>
.el-tree {
  // scoped是让样式只作用于当前组件
  // ::v-deep 是深度穿透到子组件, 让这里面的样式能作用于子组件
  // less中 /deep/
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
